<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>jQuery maphilight documentation</title>
	<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
	<script type="text/javascript" src="jquery.metadata.min.js"></script>
	<script type="text/javascript" src="../jquery.maphilight.min.js"></script>
	<script>$(function() {
		$('.map').maphilight();
	});</script>
</head>
<body>
<h1>A small map</h1>
<p>This is just a simple example of how the maps look.</p>
<p>
<img src="demo_simple.png" width="420" height="300" class="map" usemap="#simple">
<map name="simple">
<area href="#" shape="poly" coords="47,62, 106,61, 134,72, 135,118, 30,116" title="Default behavior"></area>
<area href="#" shape="poly" coords="32,157, 133,157, 127,192, 127,211, 28,211" class="{strokeColor:'0000ff',strokeWidth:5,fillColor:'ff0000',fillOpacity:0.6}" title="Metadata'd up a bit"></area>
<area href="#" shape="circ" coords="290,102,30" class="{stroke:false,fillColor:'ff0000',fillOpacity:0.6}" title="Metadata'd up a bit"></area>
<area href="#" shape="poly" coords="219,190, 225,175, 237,157, 239,148, 245,142, 251,140, 263,140, 265,139, 310,139, 311,145, 364,182, 363,201, 343,221, 333,213, 329,181, 313,177, 330,234, 295,231, 292,174, 279,176, 282,204, 269,220, 255,206, 267,167, 235,193" class="{stroke:false,fillColor:'000000',fillOpacity:1}" title="Metadata'd up a bit"></area>
</map>
</p>
<a href="./">Back to the index</a>
</body>
</html>
